<template>
  <el-button v-bind="options">
    <cc-icon
      v-if="prefixIconId"
      :iconId="prefixIconId"
      style="margin-right: 5px;"
    />
    {{ buttonName }}
    <cc-icon
      v-if="suffixIconId"
      :iconId="suffixIconId"
      style="margin-left: 5px;"
    />
  </el-button>
</template>

<script setup>
import {ref, computed, watch, onMounted} from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  compStyle: Object,
});

const buttonName = ref('');
const prefixIconId = ref('');
const suffixIconId = ref('');

const init = () => {
  const compStyle = props.compStyle;
  buttonName.value = compStyle['buttonName'] || '';
  prefixIconId.value = compStyle['prefixIcon'] || '';
  suffixIconId.value = compStyle['suffixIcon'] || '';
};

const options = computed(() => {
  const compStyle = props.compStyle || {};
  const data = {};
  visual.addIfNotNull(data, compStyle, 'size');
  visual.addIfNotNull(data, compStyle, 'type');
  visual.addIfNotNull(data, compStyle, 'style');
  visual.addIfNotNull(data, compStyle, 'label');
  visual.addIfNotNull(data, compStyle, 'plain');
  visual.addIfNotNull(data, compStyle, 'text');
  visual.addIfNotNull(data, compStyle, 'round');
  visual.addIfNotNull(data, compStyle, 'circle');
  visual.addIfNotNull(data, compStyle, 'disabled');
  return data;
});

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

onMounted(() => {
  init();
});
</script>